<template>
  <div>
    <categoriesEdit ref="RefEdit"></categoriesEdit>
    <categoriesAdd ref="RefAdd"></categoriesAdd>
    <Nav :paths="path"></Nav>
    <el-card  class="box-card mt15">
      <el-button @click="add" type="primary">添加分类</el-button>
      <br/>
      <List :RefEdit = "RefEdit" ref="List" :table-data="tableData"></List>
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="pagenum"
        :page-sizes="[1, 2, 3, 4,5,6]"
        :page-size="pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="count">
      </el-pagination>
    </el-card>
  </div>
</template>
<script lang="ts">
import { Component, Vue, Watch } from 'vue-property-decorator'
import Nav from '../Nav'
import { GET_CATEGORIES } from '@/store/categories/CONST'
import List from '@/components/categories/list.vue'
import CategoriesEdit from '@/components/categories/categories_edit.vue'
import CategoriesAdd from '@/components/categories/categories_add.vue'
@Component({
  name: 'Categories',
  components: { CategoriesAdd, CategoriesEdit, List, Nav }
})
export default class Categories extends Vue {
  public tableData =[]
  private count = this.$store.state.categories.count
  private pagesize = this.$store.state.categories.pagesize
  private pagenum = this.$store.state.categories.pagenum

  public RefEdit:any={}

  created () {
    this.render1()
    const edit = {
      RefEdit: this.$refs,
      render1: this.render1
    }
    this.RefEdit = edit
  }

  get _updateData () {
    return this.$store.state.categories.categories
  }

  add () {
    const { RefAdd: { isOpen } } = this.$refs as any
    isOpen(this.render1)
  }

  handleSizeChange (size:number) {
    const { List } = this.$refs as any
    List.isLoading = true
    this.$store.dispatch('categories/' + GET_CATEGORIES, { pagenum: this.pagenum, pagesize: size })
  }

  handleCurrentChange (current:number) {
    const { List } = this.$refs as any
    List.isLoading = true
    this.$store.dispatch('categories/' + GET_CATEGORIES, { pagenum: current, pagesize: this.pagesize })
  }

  @Watch('$store.state.categories.categories', {})
  wa (newVal:any) {
    this.tableData = newVal
  }

  @Watch('$store.state.categories.pagesize', {})
  ad (newVal:any) {
    this.pagesize = newVal
  }

  @Watch('$store.state.categories.pagenum', {})
  a2 (newVal:any) {
    this.pagenum = newVal
  }

  @Watch('$store.state.categories.count', {})
  a3 (newVal:any) {
    this.count = newVal
  }

  render1 () {
    this.$store.dispatch('categories/' + GET_CATEGORIES, { pagenum: this.pagenum, pagesize: this.pagesize })
  }

  private path =
    [
      {
        path: '/index',
        pName: '首页'
      },
      {
        path: '/index/categories',
        pName: '商品管理'
      },
      {
        path: '/index/categories',
        pName: '商品分类'
      }
    ]
}
</script>

<style lang="less" scoped>

</style>
